<template>
  <view class="container">
    <view v-if="list.length">
      <view class="app-card" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        <view class="row">
          <text class="label">联系人：</text>{{ item.contact_person }}
        </view>
        <view class="row">
          <text class="label">申请产品：</text>{{ item.product ? item.product.name : ''  }}
        </view>
        <view class="row">
          <text class="label">申请时间：</text>{{ item.create_time }}
        </view>
        <view class="status-icons">
          <image
              v-if="item.review_status == 1"
              src="/static/in.png"
              class="status-icon"
              :class="{active: item.review_status == 1}"
              mode="aspectFit"
          />
          <image
              v-if="item.review_status == 2"
              src="/static/pass.png"
              class="status-icon"
              :class="{active: item.review_status == 2}"
              mode="aspectFit"
          />
          <image
              v-if="item.review_status == 3"
              src="/static/reject.png"
              class="status-icon"
              :class="{active: item.review_status == 3}"
              mode="aspectFit"
          />
        </view>
      </view>
    </view>
    <u-empty v-else text="暂无申请记录" mode="list"></u-empty>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      list: [
      ]
    }
  },
  onShow() {
    if (!this.userInfo.id) return
    this.$api.getProductApplicationList({
      pageSize: 9999,
      user_id: this.userInfo.id
    }).then(res => {
      this.list = res.rows || [];
    });
  },
  methods: {
    statusText(status) {
      if (status == 1) return '待审核';
      if (status == 2) return '审核通过';
      if (status == 3) return '审核拒绝';
      return '未知';
    },
    statusType(status) {
      if (status == 1) return 'warning';
      if (status == 2) return 'success';
      if (status == 3) return 'error';
      return 'info';
    },
    goDetail(id) {
      uni.navigateTo({
        url: '/pages/application/detail?id=' + id
      });
    }
  }
}
</script>

<style lang="scss" scoped>
page {
    height: 100%;
    overflow: hidden;
}
.container {
    height: 100%;
    overflow: auto;
  padding: 32rpx;
    background: rgba(246, 246, 246, 1);
    padding: 20rpx;
}
.app-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  position: relative;
}
.row {
  margin-bottom: 18rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  .label {
    color: #888;
    margin-right: 12rpx;
  }
}
.status-row {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 60rpx;
}
.status-icons {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: 320rpx;
  justify-content: flex-end;
}
.status-icon {
  width: 120rpx;
  height: 120rpx;
  margin-left: 24rpx;
  filter: grayscale(1) brightness(1.5);
  opacity: 0.5;
  transition: filter 0.2s, opacity 0.2s;
}
.status-icon.active {
  filter: none;
  opacity: 1;
}
</style> 